import React, {Component} from 'react';
import {nanoid} from 'nanoid';
import './index.css';

export default class Header extends Component {
	handleKeyUp = event => {
		const {keyCode, target} = event;
		// 判断是否为回车
		if (keyCode !== 13) return;
		// 判断输入是否为空
		if (target.value.trim() === '') {
			alert('请不要输入空值');
			return;
		}
		// 装配添加对象
		const addObj = {id: nanoid(), doName: target.value, done: false};
		// 调用父组件函数
		this.props.addTodo(addObj);
		// 清空输入框
		event.target.value = '';
	};

	render() {
		return (
			<div className="todo-header">
				<input
					onKeyUp={this.handleKeyUp}
					type="text"
					placeholder="请输入你的任务名称，按回车键确认"
				/>
			</div>
		);
	}
}
